<!DOCTYPE html>
<html>
<head>
    <title>基于深度学习的工业缺陷检测</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
</head>
<body>
<!--<h3>请选择图片文件：PNG/JPG/JPEG/SVG/GIF</h3>-->
<div style="text-align: left;margin-left:100px;margin-top:100px;">
    <div>

        <img src="" id="img0" style="margin-top:20px;width: 35rem;height: 30rem;" alt="">
        <input type="button" onclick="selectFile()" value="选择文件">
        <input type="file" id="file0" style="display: none">
        <input type="button" id="b0" onclick="test()" value="预测">

        <!-- <img src="" id="img1" style="margin-top:20px;width: 35rem;height: 30rem;" alt=""> -->
        <img src="" id="img1" style="margin-top:20px;width: 35rem;height: 30rem;" alt="">
    </div>

</div>

<script type="text/javascript">
    function selectFile() {
        $("#file0").trigger("click")
    }

    $("#file0").change(function () {
        var objUrl = getObjectURL(this.files[0]);//获取文件信息
        console.log("objUrl = " + objUrl);
        if (objUrl) {
            $("#img0").attr("src", objUrl);
        }
    });

    function test() {
        var fileobj = $("#file0")[0].files[0];
        var form = new FormData();
        form.append("file", fileobj);
        $.ajax({
            type: 'POST',
            url: "predict",
            data: form,
            async: false,       //同步执行
            processData: false, // 告诉jquery要传输data对象
            contentType: false, //告诉jquery不需要增加请求头对于contentType的设置
            success: function (arg) {
                $("#img1").attr("src",'../static/gen/' + arg.data_name)
            // success:function(){
            //     alert("检测成功")
            }, error: function () {
                alert("后台处理错误");
            }
        });
    }

    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) {
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }
</script>
<style>
    .file {
        position: absolute;
        /*display: inline-block;*/
        background: #CCC;
        border: 1px solid #CCC;
        padding: 4px 4px;
        overflow: hidden;
        text-decoration: none;
        text-indent: 0;
        width: 100px;
        height: 30px;
        line-height: 30px;
        border-radius: 5px;
        color: #333;
        font-size: 13px;

    }

    .file input {
        position: absolute;
        font-size: 13px;
        right: 0;
        top: 0;
        opacity: 0;
        border: 1px solid #333;
        padding: 4px 4px;
        overflow: hidden;
        text-indent: 0;
        width: 100px;
        height: 30px;
        line-height: 30px;
        border-radius: 5px;
        color: #FFFFFF;

    }

    #b0 {
        background: #1899FF;
        border: 1px solid #CCC;
        padding: 4px 10px;
        overflow: hidden;
        text-indent: 0;
        width: 60px;
        height: 28px;
        line-height: 20px;
        border-radius: 5px;
        color: #FFFFFF;
        font-size: 13px;
    }

    /*.gradient{*/

    /*filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#fff,endcolorstr=#ccc,gradientType=0);*/
    /*-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#fff,endcolorstr=#ccc,gradientType=0);!*IE8*!*/
    /*background:#1899FF; !* 一些不支持背景渐变的浏览器 *!*/
    /*background:-moz-linear-gradient(top, #fff, #1899FF);*/
    /*background:-webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#ccc));*/
    /*background:-o-linear-gradient(top, #fff, #ccc);*/
    /*}*/
</style>
</body>
</html>


